<%@page pageEncoding="UTF-8" contentType="text/html;charset=utf-8" errorPage="/commons/error.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>商品</title>
<style type="text/css">
table{font-size: 12px;}
</style>
</head>
<body>
<div>
	<c:forEach var="item" items="${introduceList}" varStatus="status">
		<a href="javascript:;" onclick="operate(${status.index})">
		<c:if test="${item.plain }">
			<p>${item.content }</p>
		</c:if>
		<c:if test="${!item.plain }">
			<div>
				<img src="${item.content }"  style="width: 300px;height: 240px;"/>
			</div>  
		</c:if>
		</a>
		<div style="display: none;" id="div-operation-${status.index }">
			<ul>
				<li>
					<input type="button" onclick="insertText(${status.index})" value="插入文本"/>
					<div style="display: none;" id="div-insert-text-${status.index }">
						<form:form id="form" class="form-inline" commandName="introduce" action="${ctx}/admin/product/introduce/text/insert" method="post">
							<form:hidden path="id" />
							<input type="hidden" name="index" value="${status.index }"/>
							<div class="form-group">
								<form:textarea path="content" rows="8" placeholder="输入商品介绍" cssStyle="width:500px;"/>
							</div>
							<div class="form-group">
								<button type="submit" class="btn btn-primary">插入文本</button>
							</div>
						</form:form>
					</div>
				</li>
				<li>
					<input type="button" onclick="insertImage(${status.index})" value="插入图片"/>
					<div style="display: none;" id="div-insert-image-${status.index }">
						<form:form class="form-inline" commandName="introduce" action="${ctx}/admin/product/introduce/image/insert" method="post" enctype="multipart/form-data">
							<form:hidden path="id" />  
							<input type="hidden" name="index" value="${status.index }"/>
							<div class="form-group">
								<input name="img_file" id="img_file" type="file" onchange="setImagePreview(this,localImage,preview)"/>
							</div>
							<div class="form-group">
						        <div id="localImage"  style="width: 300px; height: 200px; margin-bottom: 10px;border: 1px solid #00f;">  
									<img id="preview" alt="预览图片" src="/images/no-image.jpg" width="100%" height="100%"/>  
								</div>  
						        
					        </div>
					        <div class="form-group">
								<button type="submit" class="btn btn-primary">插入图片</button>
							</div>
						</form:form>
					</div>
				</li>
				<li>
					<form:form id="form-delete" class="form-inline" commandName="introduce" action="${ctx}/admin/product/introduce/delete" method="post">
						<form:hidden path="id" />
						<input type="hidden" name="index" value="${status.index}"/>
						<input type="submit" value="删　　除"/>
					</form:form>
				</li>
			</ul>
		</div>
	</c:forEach>
</div>
<form:form id="form" class="form-inline" commandName="introduce" action="${ctx}/admin/product/introduce/text/append" method="post">
	<form:hidden path="id" />
	<div class="form-group">
		<form:textarea path="content" rows="8" placeholder="输入商品介绍" cssStyle="width:500px;"/>
	</div>
	<div class="form-group">
		<button type="submit" class="btn btn-primary">追加文本</button>
	</div>
</form:form>

<div>  
	<form:form class="form-inline" commandName="introduce" action="${ctx}/admin/product/introduce/image/append" method="post" enctype="multipart/form-data">
		<form:hidden path="id" />  
        <div id="localImage"  style="width: 300px; height: 200px; margin-bottom: 10px;border: 1px solid #00f;">  
			<img id="preview" alt="预览图片" src="/images/no-image.jpg" width="100%" height="100%"/>  
		</div>  
        <input name="img_file" id="img_file" type="file" onchange="setImagePreview(this,localImage,preview)"/>
        <div class="form-group">
			<button type="submit" class="btn btn-primary">追加图片</button>
		</div>
	</form:form>
</div>

<script type="text/javascript" src="${ctx}/scripts/lottery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#nav_product").addClass("active");
	})
	
	function operate(index) {
		$("#div-operation-"+index).toggle();
	}
	
	function insertText(index) {
		$("#div-insert-text-"+index).toggle();
	}
	
	function insertImage(index) {
		$("#div-insert-image-"+index).toggle();
	}
	
	function setImagePreview(docObj,localImagId,imgObjPreview) {
		if(docObj.files && docObj.files[0])  
        {  
            //火狐下，直接设img属性  
            imgObjPreview.style.display = 'block';  
            imgObjPreview.style.width = '300px';  
            imgObjPreview.style.height = '200px';                      


            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式    
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  
        }  
        else  
        {  
            //IE下，使用滤镜  
            docObj.select();  
            var imgSrc = document.selection.createRange().text;  
              
            //必须设置初始大小  
            localImagId.style.width = "300px";  
            localImagId.style.height = "200px";  
              
            //图片异常的捕捉，防止用户修改后缀来伪造图片  
            try  
            {  
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
             }  
             catch(e)  
             {  
                alert("您上传的图片格式不正确，请重新选择!");  
                return false;  
              }                            
              imgObjPreview.style.display = 'none';  
              document.selection.empty();  
        }  
        return true;
	}
	
</script>
</body>
</html>